<template>
	<div class="banner">
		<van-swipe :autoplay="3000" :show-indicators="false" v-if="list.length">
			<van-swipe-item v-for="(item, index) in list" :key="index">
				<img :src="item.pick" @click="toDetail(item)" />
			</van-swipe-item>
		</van-swipe>

		<copy-popup ref="copy-popup" />
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { Swipe, SwipeItem } from 'vant';
import CopyPopup from '@/components/copy/popup';

export default {
	components: {
		'van-swipe': Swipe,
		'van-swipe-item': SwipeItem,
		CopyPopup
	},

	data() {
		return {
			list: []
		};
	},

	created() {
		this.refresh();
	},

	methods: {
		refresh() {
			this.$service.common.banner
				.page({
					page: 1,
					size: 20,
					status: 1,
					scenarioId: 3
				})
				.then(res => {
					this.list = res.list;
				})
				.catch(err => {
					Toast(err.message);
				});
		},

		toDetail(item) {
			if (item.type == 1) {
				this.$emit('copy');
				if (item.tkl) {
					BestpayHtml5.System.setClipboardContent(
						{
							data: item.tkl
						},
						() => {
							this.$emit('copy');
						}
					);
				}
			} else if (item.type == 2) {
				location.href = item.link;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.banner {
	width: 100%;
	margin-top: 100px;
	padding: 0 20px;
	margin-bottom: -20px;
	border-radius: 16px;
	overflow: hidden;

	.van-swipe {
		height: 168px;
	}

	img {
		height: 168px;
		width: 100%;
		background-color: #eee;
		border-radius: 16px;
	}
}
</style>
